<script setup lang="ts">
import { useThemeStore } from '@/stores/useThemeStore'

const theme = useThemeStore()
</script>
<template>
  <n-space>
    <n-button>Default</n-button>
    <n-button type="tertiary"> Tertiary </n-button>
    <n-button type="primary"> Primary </n-button>
    <n-button type="info"> Info </n-button>
    <n-button type="success"> Success </n-button>
    <n-button type="warning"> Warning </n-button>
    <n-button type="error"> Error </n-button>
  </n-space>
  <n-form :model="theme.otherColor">
    <NDivider>主题模式</NDivider>
    <n-form-item label="主色" path="color" class="w-44">
      <n-color-picker v-model:value="theme.themeColor" :show-alpha="false" />
    </n-form-item>
    <n-form-item label="信息色" path="color" class="w-44">
      <n-color-picker v-model:value="theme.otherColor.info" :show-alpha="false" />
    </n-form-item>
    <n-form-item label="成功色" path="color" class="w-44">
      <n-color-picker v-model:value="theme.otherColor.success" :show-alpha="false" />
    </n-form-item>
    <n-form-item label="警告色" path="color" class="w-44">
      <n-color-picker v-model:value="theme.otherColor.warning" :show-alpha="false" />
    </n-form-item>
    <n-form-item label="错误色" path="color" class="w-44">
      <n-color-picker v-model:value="theme.otherColor.error" :show-alpha="false" />
    </n-form-item>
  </n-form>
</template>

<style></style>
